import React from "react"

import {
  View,
  Text,
  StyleSheet
} from "react-native"

import {
  Avatar,
  Button
} from 'react-native-elements'

import BtnFollow from '~/components/btn/follow'

class Component extends React.Component {
  constructor (props) {
    super(props)
  }

  render() {
    const {user} = this.props

    return (
      <View style={styles.header}>
        <View style={styles.hl}>
          <Avatar
            size={48}
            title='TB'
            rounded
            source={{uri: user.avatar }}
            onPress={() => this.onClickAvatar()}
          />

          <View style={{marginLeft: 10}}>
            <Text style={{fontWeight: '600'}}>{user.name}</Text>
            <Text style={{marginTop: 2, color: "#A0AEC0"}}>22分钟前</Text>
          </View>
        </View>

        <View>
          <BtnFollow isFollow={false}></BtnFollow>
        </View>
      </View>
    )
  }

  onClickAvatar () {

  }
}

const styles = StyleSheet.create({
  header: {
    paddingVertical: 10,
    paddingHorizontal: 10,
    flexDirection: 'row',
    alignItems: 'center',
  },
  hl: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  }
})

export default Component
